<template>
    <div>
        <div style="text-align: right">
            <RadioGroup style="margin-top: 1%;margin-right: 1%" v-model="friendBlogVo.status" type="button"
                        @on-change="getFriendBlog">
                <Radio :label="3">全部</Radio>
                <Radio :label="0">待审核</Radio>
                <Radio :label="1">未通过</Radio>
                <Radio :label="2">已通过</Radio>
            </RadioGroup>
        </div>
        <hr style="margin: 1% auto" color="#f4f4f4"/>
        <div style="background-color: white">
            <div v-if="friendBlogList.length<1" style="text-align: center;font-weight: bolder;padding-top: 10px">
                您还没有申请过友链~
            </div>
            <div v-else v-for="(friend,index) in friendBlogList" :key="index"
                 style="width: 100%;margin: 1% 0 1% 3%;border-bottom: 1.5px solid #f4f4f4;height: 120px">
                <div style="width:100%;display: flex;justify-content: space-between">
                    <div>
                        <Tag v-if="friend.fstatus===0" color="default">待审核</Tag>
                        <Tag v-else-if="friend.fstatus===1" color="error">未通过</Tag>
                        <Tag v-else color="success">已通过</Tag>
                        {{friend.fname}}
                    </div>
                    <div style="margin-right: 5%">{{friend.fFriendblogtime}}</div>
                </div>
                <div style="margin-top: 2%;text-align: left">友链地址:
                    <span style="color: deepskyblue">{{friend.furl}}</span>
                </div>
                <div style="margin-top: 2%;font-weight: bolder;display: flex;justify-content: space-between">
                    <div>
                        <span>反馈信息：</span>
                        <span>{{friend.fbackinfo!==null?friend.fbackinfo:'无'}}</span>
                    </div>
                    <div style="margin-right: 4%">
                        <Button type="warning" ghost @click="editFriendBlog(friend)">修改友链</Button>
                    </div>
                </div>
            </div>
        </div>
        <!--分页-->
        <div style="margin-left: 3%;">
            <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="friendBlogVo.pageSize"
                  show-elevator show-sizer
                  show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                  @on-page-size-change="changePageSize"/>
        </div>
        <!--更新友链内容-->
        <Modal v-model="editLinkVisable" title="更新友链" footer-hide :closable="false">
            <Form ref="linkRef" :model="linkVo" :rules="linkRules" :label-width="120">
                <FormItem label="网站名称:" prop="name">
                    <Input v-model="linkVo.name" placeholder="请输入新友链网站名称"/>
                </FormItem>
                <FormItem label="网站地址:" prop="url">
                    <Input v-model="linkVo.url" placeholder="请输入新友链网站地址" @keyup.native.enter="updateLink('linkRef')"/>
                </FormItem>
                <Button type="success" long @click="updateLink('linkRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="editLinkVisable=false">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        editLinkVisable: false,
        linkVo: {
          name: '',
          url: '',
          friendId: 0
        },
        linkRules: {
          name: [
            {
              required: true,
              message: '网站名称不能为空',
              trigger: 'blur'
            }
          ],
          url: [
            {
              required: true,
              message: '网站地址不能为空',
              trigger: 'blur'
            }
          ]
        },
        friendBlogVo: {
          pageNum: 1,
          pageSize: 3,
          status: 3,
          id: 0,
          my: true
        },
        friendBlogList: [],
        total: 0,
        pageSizeChoice: [7, 13, 20, 50, 100]
      }
    },
    mounted () {
      this.getFriendBlog()
    },
    methods: {
      getFriendBlog () {
        this.$http.get('friend-blog', { params: new URLSearchParams(this.friendBlogVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.friendBlogList = res.data
            this.total = res.count
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 改变当前页码
      changePageNum (pagenum) {
        this.friendBlogVo.pageNum = pagenum
        this.getFriendBlog()
      },
      // 改变每页个数
      changePageSize (pagesize) {
        this.friendBlogVo.pageSize = pagesize
        this.getFriendBlog()
      },
      // 显示更新友链对话框
      editFriendBlog (row) {
        this.linkVo.friendId = row.fid
        this.linkVo.name = row.fname
        this.linkVo.url = row.furl
        this.editLinkVisable = true
      },
      // 更新友链
      updateLink (name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.put('friend-blog', new URLSearchParams(this.linkVo)).then(res => {
            res = res.data
            if (res.code === 6520) {
              this.$refs[name].resetFields()
              this.linkVo.friendId = 0
              this.editLinkVisable = false
              this.getFriendBlog()
              this.$Message.success(res.msg)
              // vuex获取用户的消息通知
              this.$store.dispatch('informInfo', this)
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
